<!DOCTYPE html>
<html>
    <head>
        <!-- 当前文档的字符集编码为utf-8 -->
        <meta charset="utf-8">
        <meta name = "author" content="wyrQF">
        <meta name="keywords" content="CGI开发 H5模版 千锋教育 西安物联网">
        <title>HTML5模版-主页</title>
        <link rel="stylesheet" href="/css/my.css">
        <!-- 引入外联样式 -->
        <style>
            /* 弹性盒子：在盒子模型（width height padding margin border-radiu )基础之上增强对齐方式 */
            .img-circle{
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
            .logo{
                height: 45px;
            }
            /* display: flex;将一个标签的类型修改为弹性盒子（对齐，自动计算子标签的所占空间-自动排列） */
            /* justify- 主轴的对齐方式(row-水平轴为主，column-垂直轴为主) */
            /* ailgn-item 副轴的对齐方式
                content 代表子元素 items代表文本内容 */
            #topper{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                height: 50px;
                border-bottom: 1px solid lightgray;
            }
            .row
            {
                display: flex;
                flex-direction: row;
            }
            .row-vcenter{
                align-items: center;
            }
            #userInfo{
                margin: 0 10px ;
            }
            #main{
                height: 100%;
                background-color: rgb(205, 171, 236);
            }
            #footer{
                height: 30px;
                border-top: 1px solid lightgray;
                text-align: center;
            }
            #container{
                height: 100%;
                display: flex;
                flex-direction: column;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="topper">
                <img class="logo" src="http://www.qfedu.com/images/index2021/logo-edu.png">
                <div class="row row-vcenter">
                    <b id="userInfo">wyr</b>
                    <img src="/img/头像-女学生5.png" class="img-circle">
                </div>
            </div>
            <div id="main">
    
                
            </div>
            <div id="footer">
                <b>版权所有@千锋西安-IOT2402</b><br>
                <i>2024-10-10</i>
            </div>
        </div>
    </body>
</html>
